<template>
  <div>
    <el-row>
      <div class="course_header">
        <el-card class="box-card">
          <div  class="block">
            <el-image style="width: 350px; height: 200px" :src="fileHost + courseInfo.headImg"></el-image>

            <div style="float: right; width: 700px;">
               <div>
                 <h2>{{courseInfo.name}}</h2>
                 <label class="tag_item">共<label style="color: red">{{courseInfo.sectionNumber}}</label>章</label>
                 <label class="tag_item"><label style="color: red">{{courseInfo.sectionNodeNumber}}</label>节课时</label>
                 <label class="tag_item">{{courseInfo.pushTime}}推出</label>
               </div>

              <label class="tag_item">课程简介</label>
              <div class="course_des">
                {{courseInfo.represent}}
              </div>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 50px" class="box-card">
          <div class="block">
            <template>
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="课程目录" name="sectionList">
                  <el-card v-for="(section, index) in courseSectionList" :key="index" class="box-card">
                    <div slot="header" class="clearfix">
                      <span>第{{index + 1}}章：{{section.title}}</span>
                    </div>
                    <div
                      v-for="(node, nodeIndex) in section.courseSectionNodeList"
                      :key="node.id"
                      @click="playSectionNodeVideo(node)"
                      class="text item list">
                      <i style="color: red" class="el-icon-video-play"></i>
                      {{index + 1}}-{{nodeIndex + 1}}&nbsp;{{node.title}}
                    </div>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="课程案件下载" name="second">课程案件下载</el-tab-pane>
                <el-tab-pane :label="commentLabel" name="commentList">
                  <el-card  class="box-card rate">
                    <div style="display: flex" class="text item">
                      <label style="width: 100px; color: #1c1f21;  font-weight: 700; font-size:20px; display: block">综合评分</label>
                     <label style="font-size: 32px;width: 75px;
                            font-weight: 700;
                            color: #4d555d;">{{courseInfo.valuateMark}}</label>
                      <el-rate
                        style="width: 200px; margin-left: 10px;"
                        v-model="courseInfo.valuateMark / 2"
                        :colors="colors">
                      </el-rate>
                    </div>
                  </el-card>

                  <el-card class="box-card rate">
                    <div class="text item">
                      <el-form
                        :rules="courseValuateRules"
                        :model="courseValuate"
                        status-icon
                        ref="courseValuateForm"
                        label-width="100px"
                        class="demo-ruleForm">

                        <el-form-item label="评价" prop="valuateMark">
                            <el-rate
                              style="padding-top: 12px"
                              v-model="courseValuate.valuateMark"
                              :colors="colors">
                            </el-rate>
                        </el-form-item>

                        <el-form-item label="内容" prop="content">
                          <el-input
                            v-model="courseValuate.content"
                            style="width: 80%"
                            :rows="5"
                            type="textarea"
                            autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item style="text-align: right">
                          <el-button @click="commitCourseValuate" type="danger" round>提交</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-card>

                  <el-card v-for="(courseValuate, index) in courseValuateList" :key="index" class="box-card rate">
                    <div style="display: flex" class="text item">
                      <div class="demo-type">
                        <el-avatar :size="60" src="https://empty">
                          <img :src="fileHost + courseValuate.headImg"/>
                        </el-avatar>
                        <div class="user_tag">
                          <div class="username">{{courseValuate.loginName}}</div>
                          <div style="float: right">
                            <el-rate
                              style="padding-top: 12px"
                              v-model="courseValuate.valuateMark"
                              :colors="colors">
                            </el-rate>
                          </div>
                          <div class="tag_content">
                            {{courseValuate.content}}
                          </div>
                          <div style="text-align:right;font-size:10px;color:#b5b9bc">时间: {{courseValuate.createDate}}</div>
                        </div>
                      </div>
                    </div>
                  </el-card>

                  <el-pagination
                    v-if="totalCount > 0"
                    background
                    @current-change="changeCourseValuatePage"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    :total="totalCount"
                    layout="total, sizes, prev, pager, next, jumper">
                  </el-pagination>
                </el-tab-pane>
              </el-tabs>
            </template>
          </div>
        </el-card>
      </div>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        fileHost: this.$store.state.common.fileHost,
        courseValuate: {
          courseId: null,
          content: '',
          valuateMark: 5,
          studentId: null
        },
        courseValuateRules: {
          valuateMark: [
            { required: true, message: '请为课程打分', trigger: 'blur' },
          ],
          content: [
            { required: true, message: '请输入课程评价内容', trigger: 'blur' }
          ],
        },
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        courseValuateList: [],
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
        fileHost: this.$store.state.common.fileHost,
        courseSectionList: [],
        src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        activeName: 'sectionList',
        commentLabel: '评论专区'
      }
    },


    computed: {
      ...mapGetters({
        courseInfo: 'course/getCourseInfo'
      })
    },

    mounted () {
       if (this.courseInfo.commentNumber && this.courseInfo.commentNumber > 0) {
         this.commentLabel = '评论专区(' + this.courseInfo.commentNumber + ')'
       }
       this.getCourseSectionList()
    },

    methods: {

      changeCourseValuatePage (val) {
        this.currentPage = val
        this.getCommentListByCourseId()
      },

      getCommentListByCourseId () {
        this.axios.get(this.$httpApi.httpUrl('/student/courseValuate'), {
          params: {
             courseId: this.courseInfo.id,
             pageNumber: this.currentPage,
             pageSize: this.pageSize
          }
        }).then(response => {
          this.courseValuateList = response.data.data.dataList
          this.totalCount = response.data.data.total
        })
      },

      handleClick(tab) {
        let selectTab = tab.name
        if (selectTab === 'commentList') {
          if (this.courseValuateList.length === 0) {
            this.getCommentListByCourseId()
          }
        }
      },

      getCourseSectionList () {
        this.axios.get(this.$httpApi.httpUrl('/student/courseInfo/' + this.courseInfo.id + '/section'), {
          params: {

          }
        }).then(response => {
          this.courseSectionList = response.data.data
        })
      },

      playSectionNodeVideo (node) {
        let videoInfo = JSON.parse(node.videoInfo)
        let videoUrl = videoInfo.url
        this.playVideo(videoUrl, 'coursePlay')
      },

      commitCourseValuate () {
        this.$refs['courseValuateForm'].validate((valid) => {
          if (valid) {
            this.courseValuate.courseId = this.courseInfo.id
            this.axios.post(this.$httpApi.httpUrl('/student/courseValuate'), this.courseValuate).then(response => {
              if (response.data.code === 1) {
                this.$message.success('提交成功! 感谢您的支持')
                this.getCommentListByCourseId()
              }
            })
          }
        })
      }
    }
  }
</script>


<style lang='scss' scoped>

  .block .el-card__header {
    color: #1c1f21;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    border-bottom: none !important;
  }
  .subjectinfo {
    width: 1200px;
    margin: 0 auto;
  }

  .el-pagination {
    margin-top: 15px;
    text-align: center;
  }

  .user_tag {
    width: 800px;
    float: right;
    margin-left: 50px;
  }

  .course_header {
    position: relative;
    left: 10%;
    margin: 0 auto;
    width: 1200px;
    display: inline-block;
    min-height: 200px;
  }

  .box-card {
    margin-top: 10px;
  }

  .box-card .list {
    cursor: pointer;
  }

  .box-card .list:hover {
    background: #f3f3f3;
  }

  .tag_item {
    display: inline-block;
    line-height: 20px;
    margin-top: 10px;
    margin-right: 8px;
  }

  .course_des {
    padding: 14px;
    background: #f3f3f3;
    margin-top: 5px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    display: block;
    line-height: 20px;
    padding: 10px 0;

  }

  .user_tag .username {
    color: #787d82;
    font-size: 12px;
    text-align: left;
  }

  .user_tag .tag_content{
    width: 600px;
    margin-top: 20px;
    line-height: 28px;
    font-size: 14px;
    color: #14191e;
    text-align: left;
  }

</style>
